import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    Image,
    StyleSheet
} from 'react-native';

import * as Const from './../../../const';
import Options from './../../../const/options';

import birth_icon from './../../../images/common/birth.png';

interface Props {
    age:number,
    gender:number
}


class Label extends PureComponent<Props> {

    static defaultProps = {
        age:0,
        gender:1
    }

    get genderIcon() {
        const {
            gender
        } = this.props;
        const {
            icon
        } = Options.gender.find(({id}:any)=>(
            id === gender
        )) || {}
        return icon;
    }

    render() {
        const {
            age
        } = this.props;

        return (
            <View style={styles.container}>
                {!!this.genderIcon && (
                    <Image
                        style={styles.iconStyle}
                        source={this.genderIcon}
                    />
                )}
                <View style={styles.ageContent}>
                    <View style={styles.line} />
                    <Image source={birth_icon}/>
                    <Text style={styles.age}>
                        {age}
                    </Text>
                </View>

            </View>
        )
    }
}

export default Label;

const styles = StyleSheet.create({
    iconStyle:{
        width:20,
        height:20
    },
    container:{
        alignItems:`center`,
        flexDirection:`row`
    },
    ageContent:{
        marginLeft:6,
        alignItems:`center`,
        flexDirection:`row`
    },
    age:{
        fontSize:14,
        color:`#fff`,
        paddingLeft:4,
        fontFamily:Const.fontFamily
    },
    line:{
        left:3,
        bottom:3,
        height:6,
        width:`100%`,
        borderRadius:3,
        position:`absolute`,
        backgroundColor:`#AA00FF`
    }
}) as any;